const path = require('path');
// 自动生成html模板并动态加载生产的xxx.bundle.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 每次打包时清空指定文件夹
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// 使用webpack内置插件
const webpack = require('webpack');

module.exports = {
	mode: 'development',
	// entry: './src/entry.js',
	entry: {
		app: './src/entrys/index.js',
		print: './src/assets/js/print.js'
	},
	output: {
		// filename: 'bundle.js',
		filename: '[name].bundle.js', // 根据entry动态输出
		path: path.resolve(__dirname, '../dists/dist2'),
		publicPath: '/'	// 执行npm run server时用'/', 其他用'./'
	},
	devtool: 'inline-source-map', //明确指出运行时的报错文件，(由打包后的bundle.js映射的源文件)
	devServer: { // 需要安装webpack-dev-server插件，执行 npm run dev后监听文件改变后不需要刷新浏览器，浏览器自动刷新渲染
		contentBase: '../dist2', //编译输出目录 等同于output下path路径 path.resolve(__dirname, '../dist2'),
		publicPath: '/', // 控制入口index.html页面引入编译输出bundle.js的路径方式
		clientLogLevel: 'warning',
        historyApiFallback: true,
		compress: true, // 配置是否启用 gzip 压缩。boolean 为类型，默认为 false
		host: '0.0.0.0', //'localhost', // 默认是 localhost。如果你希望服务器外部可访问，指定如下：
		useLocalIp: true,	// 打开浏览器窗口是启用本地ip, 需要上面host设置为'0.0.0.0'
  		port: 9000,
		open: true, // 启动后自动打开浏览器
		openPage: 'different/page', // 配置启动后自动打开浏览器url页面, 默认http://192.168.31.48:9000/, 配置后http://192.168.31.48:9000/different/page
		quiet: true, // necessary for FriendlyErrorsPlugin ,启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台。这也意味着来自 webpack 的错误或警告在控制台不可见。
		writeToDisk: true, // 默认为false保存在内存中，true临时文件被写入到磁盘(contentBase指定目录),
		// writeToDisk: (filePath) => {
		//   return /superman\.css$/.test(filePath); // 返回为true时才会被写入到本地磁盘
		// },
		proxy: {
			'/api': 'http://localhost:3000',
			'/api2': {
				target: 'http://localhost:3000',
				pathRewrite: {'^/api' : ''}
			}
		},
		// 配置请求头信息
		headers: {
		  'X-Custom-Foo': 'bar'
		}
	},
	plugins: [
		new CleanWebpackPlugin({
			cleanStaleWebpackAssets: false // true清理所有文件， false只删除变动过的文件(如执行 npm run watch时dist下的index.html时没有改变的，不需要删除)
		}), // 每次打包前删除dist文件夹
		new HtmlWebpackPlugin({
			title: '自动生成的index.html页面的标题',
			filename: 'index.html',
			// template: 'index.html',
			inject: true,
			// favicon: path.join(__dirname, '..', 'favicon.ico')
		}),
		// 注册全局插件、工具类等， 这样就不需要每个页面import _ from 'lodash'， 直接使用_即可
		new webpack.ProvidePlugin({ // 插件、工具类支持自定义别名
			_: 'lodash', // 注意：插件、工具类必须来源于node_modules目录
			_join: ['lodash', 'join'] // 只注册loadah下的join方法为全局方法
		})
	],
	module: {
		rules: [{
				test: /\.css$/,
				use: [
					'style-loader',
					'css-loader'
				]
			},
			{
				test: /\.(png|svg|jpg|gif)$/,
				use: [
					'file-loader'
				]
			}
		]
	}
}